html,
body {
  scroll-behavior: smooth;
  height: 100%;
  z-index: 1;
  width: 100%;
}

.container-fluid {
  padding-left: 0;
  padding-right: 0;
}

.nav-center {
  width: unset;
  font-family: 'Recursive', sans-serif;
  font-size: 1.2rem;
}

.arrow-down {
  height: 0;
  width: 0;
  border-left: 10vh solid transparent;
  border-right: 10vh solid transparent;
  border-top: 10vh solid #1D48C0;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  margin-top: 5%;
  padding-bottom: 4%;
  -webkit-animation: arrowBlink 1s infinite forwards;
          animation: arrowBlink 1s infinite forwards;
  -webkit-animation-delay: 6.5s;
          animation-delay: 6.5s;
  opacity: 0;
}

nav {
  position: relative;
  margin-left: auto;
  margin-right: auto;
}

.logo {
  -webkit-filter: drop-shadow(2px 4px 8px #585858);
          filter: drop-shadow(2px 4px 8px #585858);
}

.linkedinlogo {
  -ms-flex-line-pack: center;
      align-content: center;
  max-width: 90px;
}

span {
  border-color: black;
  width: 100%;
  border: 0px;
  border-bottom: 2px solid;
}

.section-a {
  width: 100%;
  min-height: 100vh;
}

.section-a,
.section-b,
.section-c,
.section-d {
  width: 100%;
}

h1 {
  justify-items: center;
  text-align: center;
}

#intro {
  margin-top: 3%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  font-size: 7rem;
  font-family: 'Recursive', sans-serif;
  color: #1D48C0;
  width: 10%;
  position: relative;
  margin-left: auto;
  margin-right: auto;
}

@-webkit-keyframes arrowBlink {
  0% {
    opacity: 0;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(20px);
            transform: translateY(20px);
  }
}

@keyframes arrowBlink {
  0% {
    opacity: 0;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(20px);
            transform: translateY(20px);
  }
}

@-webkit-keyframes introtyping {
  0% {
    width: 0%;
  }
  100% {
    width: 12.5ch;
  }
}

@keyframes introtyping {
  0% {
    width: 0%;
  }
  100% {
    width: 12.5ch;
  }
}

@-webkit-keyframes introblink {
  0%,
  100% {
    border-right: 4px solid transparent;
  }
  50% {
    border-right: 5px solid #1D48C0;
  }
}

@keyframes introblink {
  0%,
  100% {
    border-right: 4px solid transparent;
  }
  50% {
    border-right: 5px solid #1D48C0;
  }
}

@-webkit-keyframes typing {
  0% {
    width: 0%;
    opacity: 0;
  }
  1% {
    opacity: 1;
  }
  100% {
    width: 25ch;
    opacity: 1;
  }
}

@keyframes typing {
  0% {
    width: 0%;
    opacity: 0;
  }
  1% {
    opacity: 1;
  }
  100% {
    width: 25ch;
    opacity: 1;
  }
}

@-webkit-keyframes blink {
  0%,
  100% {
    border-right: 4px solid transparent;
  }
  50% {
    border-right: 5px solid black;
  }
}

@keyframes blink {
  0%,
  100% {
    border-right: 4px solid transparent;
  }
  50% {
    border-right: 5px solid black;
  }
}

@-webkit-keyframes typing2 {
  0% {
    width: 0%;
    opacity: 0;
  }
  1% {
    opacity: 1;
  }
  100% {
    width: 15ch;
    opacity: 1;
  }
}

@keyframes typing2 {
  0% {
    width: 0%;
    opacity: 0;
  }
  1% {
    opacity: 1;
  }
  100% {
    width: 15ch;
    opacity: 1;
  }
}

@-webkit-keyframes blink2 {
  0%,
  100% {
    border-right: 5px solid transparent;
  }
  50% {
    border-right: 5px solid black;
  }
}

@keyframes blink2 {
  0%,
  100% {
    border-right: 5px solid transparent;
  }
  50% {
    border-right: 5px solid black;
  }
}

#intro-subtext {
  font-family: 'Recursive', sans-serif;
  font-size: 4rem;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.intro-animation {
  white-space: nowrap;
  overflow: hidden;
  -webkit-animation: introtyping 1.5s steps(15) forwards, introblink 1s 1.9;
          animation: introtyping 1.5s steps(15) forwards, introblink 1s 1.9;
}

.first-animation {
  opacity: 0;
  white-space: nowrap;
  overflow: hidden;
  -webkit-animation: typing 2s steps(31) forwards, blink 1s 2.5;
          animation: typing 2s steps(31) forwards, blink 1s 2.5;
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
}

.second-animation {
  opacity: 0;
  white-space: nowrap;
  overflow: hidden;
  -webkit-animation: typing2 1.5s steps(18) forwards, blink2 1s infinite;
          animation: typing2 1.5s steps(18) forwards, blink2 1s infinite;
  -webkit-animation-delay: 4.4s;
          animation-delay: 4.4s;
}

.center {
  padding-top: 5%;
  width: 12%;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 5%;
  -webkit-filter: drop-shadow(2px 4px 8px #585858);
          filter: drop-shadow(2px 4px 8px #585858);
}

.center2 {
  padding-top: 2%;
  width: 20%;
  display: none;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 2%;
  bottom: 100px;
}

.section-b {
  padding-top: 2%;
  padding-bottom: 2%;
  min-height: 50vh;
  background-color: #F1F1F1;
}

.containerAlt {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-flow: row wrap;
          flex-flow: row wrap;
}

figure {
  position: relative;
}

h2 {
  text-align: center;
  word-wrap: wrap;
  font-family: 'Recursive', sans-serif;
  font-size: 4rem;
}

h3 {
  text-align: center;
  font-family: 'Recursive', sans-serif;
  max-width: 80ch;
  word-wrap: break-word;
}

#synopsis {
  text-align: left;
  color: #1D48C0;
}

p {
  font-family: 'Recursive', sans-serif;
}

.section-b p {
  text-align: center;
  max-width: 80ch;
}

.section-c p {
  max-width: 60ch;
  font-size: 1rem;
}

.project {
  width: 100%;
  padding: 10px;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  -webkit-filter: drop-shadow(2px 4px 8px #585858);
          filter: drop-shadow(2px 4px 8px #585858);
}

.content {
  background-color: #fff;
  padding-bottom: 1px;
  min-height: 300px;
}

.text {
  position: relative;
  top: 50%;
  left: 40%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  -webkit-transition: .5s ease;
  transition: .5s ease;
  background: rgba(0, 0, 0, 0.5);
}

.project :hover .overlay {
  opacity: 1;
}

.centerimg {
  width: 20%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  margin-left: auto;
  margin-right: auto;
}

#contactImages {
  color: white;
}

.section-c {
  padding-top: 2%;
  padding-bottom: 2%;
  background-color: #fff;
  min-height: 50vh;
}

.section-d {
  padding-top: 2%;
  background-color: #D9D9D9;
  padding-bottom: 2%;
}

.column-control {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
}

.column-control2 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  font-family: 'Recursive', sans-serif;
  font-size: 20px;
}

.column1,
.column2 {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  padding: 2%;
  width: 100%;
}

.column3,
.column4 {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  padding: 2%;
  width: 100%;
}

ul {
  padding: 0;
  padding-left: 6%;
}

.contact-sub {
  text-align: center;
}

footer {
  text-align: center;
  min-height: 3%;
  padding: 1%;
  background-color: #1D48C0;
  color: white;
}

body.dark-theme nav,
body.dark-theme html,
body.dark-theme .section-a,
body.dark-theme .section-c {
  background-color: #121212;
}

body.dark-theme .section-b,
body.dark-theme .section-d {
  background-color: #141414;
}

body.dark-theme h2,
body.dark-theme p,
body.dark-theme li {
  color: #fff;
}

body.dark-theme .project,
body.dark-theme .center {
  -webkit-filter: none;
          filter: none;
}

body.dark-theme .project p {
  color: black;
}

body.dark-theme .nav-light,
body.dark-theme .nav-link,
body.dark-theme .navbar-nav {
  color: #fff;
}

body.dark-theme #intro {
  margin-top: auto !important;
}

body.dark-theme .centerImg {
  -webkit-filter: drop-shadow(2px 2px 3px white);
          filter: drop-shadow(2px 2px 3px white);
}

@media only screen and (max-width: 1600px) and (orientation: portrait) and (min-width: 760px) {
  .center {
    width: 50%;
  }
  .section-c {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  #intro {
    font-size: 6rem;
  }
}

@media only screen and (max-width: 1600px) and (orientation: landscape) and (min-height: 760px) {
  #intro {
    font-size: 5rem;
  }
  #intro-subtext {
    font-size: 3.5rem;
  }
  .center {
    width: 20%;
  }
  .section-c {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}

@media only screen and (max-width: 1600px) and (orientation: landscape) and (max-height: 759px) {
  #intro {
    font-size: 5rem;
  }
  #intro-subtext {
    font-size: 3rem;
  }
  body,
  html {
    padding-top: 0;
  }
  .center {
    width: 20%;
  }
}

@media only screen and (max-height: 350px) and (orientation: landscape) and (max-width: 1600px) {
  .section-c {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  footer {
    min-height: 20%;
  }
}

@media only screen and (max-height: 250px) and (orientation: landscape) and (max-width: 1600px) {
  .section-c {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  footer {
    min-height: 20%;
  }
}

@media only screen and (max-width: 950px) and (orientation: portrait) {
  #intro {
    font-size: 2.6rem;
  }
  #intro-subtext {
    font-size: 1.5rem;
    text-overflow: wrap;
  }
  .center {
    width: 50%;
    padding-top: 20%;
  }
  .containerAlt {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .section-c {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .column-control {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .centerimg {
    padding: 20px;
    width: 250px;
  }
}

@media only screen and (max-width: 775px) and (orientation: portrait) {
  #intro {
    font-size: 2.6rem;
  }
  #intro-subtext {
    font-size: 1.5rem;
    text-overflow: wrap;
  }
  .center {
    width: 50%;
  }
  .centerimg {
    padding: 20px;
    width: 250px;
  }
}

@media only screen and (max-width: 400px) {
  .arrow-down {
    border-left: 7vh solid transparent;
    border-right: 7vh solid transparent;
    border-top: 7vh solid #1D48C0;
  }
}

@media only screen and (max-width: 375px) and (orientation: portrait) {
  #intro {
    font-size: 2.4rem;
  }
  #intro-subtext {
    font-size: 1.5rem;
  }
  .content {
    min-height: 0px;
    padding-bottom: 0px;
  }
}

@media only screen and (max-width: 321px) and (orientation: portrait) {
  html {
    min-width: 321px;
  }
  #intro {
    margin-top: 20%;
    font-size: 2rem;
  }
  #intro-subtext {
    font-size: 1rem;
  }
  h2 {
    font-size: 2rem;
  }
  .center {
    padding-top: 50%;
  }
  .content {
    min-height: 0px;
  }
  .centerimg {
    display: none;
  }
}

@media only screen and (max-height: 400px) and (orientation: landscape) and (max-width: 670px) {
  #intro {
    font-size: 2.6rem;
  }
  #intro-subtext {
    font-size: 1.5rem;
  }
  .containerAlt {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    width: 60%;
  }
  .section-c {
    height: 250vh;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .section-c h3 {
    text-align: center;
    max-width: 60ch;
    word-wrap: break-word;
  }
  .column-control {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}

@media only screen and (max-height: 600px) and (min-height: 401px) and (orientation: landscape) and (max-width: 900px) {
  #intro {
    font-size: 2.6rem;
  }
  #intro-subtext {
    font-size: 1.5rem;
  }
  .containerAlt {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    width: 50%;
  }
  .section-c {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .column-control {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    width: 100%;
  }
}

@media only screen and (max-height: 400px) and (min-width: 600px) and (orientation: landscape) and (max-width: 900px) {
  #intro {
    font-size: 2.6rem;
  }
  #intro-subtext {
    font-size: 1.5rem;
  }
  .containerAlt {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    width: 50%;
  }
  .section-c {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .column-control {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    width: 100%;
  }
}

@media only screen and (max-height: 600px) and (min-width: 600px) and (orientation: landscape) and (max-width: 900px) {
  #intro {
    font-size: 4rem;
  }
  #intro-subtext {
    font-size: 2.5rem;
  }
  .containerAlt {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    width: 50%;
  }
  .section-c {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .column-control {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    width: 100%;
  }
}

@media only screen and (max-height: 400px) and (min-width: 600px) and (orientation: landscape) and (max-width: 900px) {
  #intro {
    font-size: 4rem;
  }
  #intro-subtext {
    font-size: 2.5rem;
  }
  .containerAlt {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    width: 50%;
  }
  .section-c {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .column-control {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    width: 100%;
  }
}

@media only screen and (orientation: portrait) and (max-width: 382px) and (max-height: 700px) {
  .section-c {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}
/*# sourceMappingURL=styles.css.map */